<template>
	<div>
		<mainTop></mainTop>
		<div class="zgzsMiddleBox">
			<div class="zgzs">
				<div class="zgTitle" 
					@mouseleave="zgTitleModuleHoverIndex = selectedzgTitleModuleHover" 
					style="width: 100%;font-family: PingFangSC-Medium, sans-serif">
					<div class="zgTitleModule" 
					:class="{'zgTitleModuleHover':zgTitleModuleHoverIndex==index||selectedzgTitleModuleHover==index}" 
					@click="clickexhibition(index,item.id) "
					@mouseover="zgTitleModuleHoverIndex = index"
					v-for="(item,index) in exhibition.rows"
					:key="index" style="cursor: pointer;"
					>
						<div style="margin-top: 10px;">Exhibition</div>
						<div>{{ item.exhibitionhallname }}</div>
					</div>
					<!-- <div class="zgTitleModule" 
					:class="{'zgTitleModuleHover':zgTitleModuleHoverIndex==1||selectedzgTitleModuleHover==1}" 
					@click="selectedzgTitleModuleHover=1"
					@mouseover="zgTitleModuleHoverIndex = 1">
						<div  style="margin-top: 10px;">erhaozhanguan</div>
						<div>二号展馆</div>
					</div>
					<div class="zgTitleModule" 
					:class="{'zgTitleModuleHover':zgTitleModuleHoverIndex==2||selectedzgTitleModuleHover==2}" 
					@click="selectedzgTitleModuleHover=2"
					@mouseover="zgTitleModuleHoverIndex = 2">
						<div style="margin-top: 10px;">sanhaozhanguan</div>
						<div>三号展馆</div>
					</div> -->
					<div class="zgTitleModule" style="cursor: pointer;"
					:class="{'zgTitleModuleHover':zgTitleModuleHoverIndex==99||selectedzgTitleModuleHover==99}" 
					@click="click2d(99)"
					@mouseover="zgTitleModuleHoverIndex = 99">
						<div style="margin-top: 10px;">Exhibition</div>
						<div>2D展馆</div>
					</div>
					<div class="zgTitleModule" style="cursor: pointer;"
					:class="{'zgTitleModuleHover':zgTitleModuleHoverIndex==100||selectedzgTitleModuleHover==100}" 
					@click="selectedzgTitleModuleHover=100"
					@mouseover="zgTitleModuleHoverIndex = 100">
					<a href="https://www.goji-expo.org.cn/index/exhibition/index" target="_blank" style="text-decoration:none;color: inherit;" >
						<div style="margin-top: 10px;">Exhibition</div>
						<div>3D展馆</div>
					</a>
					</div>
					<!-- https://www.goji-expo.org.cn/index/exhibition/index -->
				</div>
				<div class="zgfl" style="margin-top: 25px; width: 100%;font-family: PingFangSC-Medium, sans-serif">
					<!-- <div class="origin" 
						style="width: 100%;height: 50px;border-bottom: 2px solid #eceaea;text-align: center;font-size: 21px;color: #150e52;font-weight: 500;">
						<div style="display: inline-block;height: 100%;line-height: 50px;margin-right: 50px;padding:0px 13px;"
						:class="{'originHover':selectedOriginHover==0}" @click="selectedOriginHover=0">品牌</div>
						<div style="display: inline-block;height: 100%;line-height: 50px;"
						:class="{'originHover':selectedOriginHover==1}" @click="selectedOriginHover=1">参展商</div>
					</div> -->
					<!-- <div class="flColumn">
						<div><span class="columnName">分类</span><div class="flContent"><a>红葡萄酒</a><a>红葡萄酒</a><a>桃红葡萄酒</a><a>红葡萄酒</a><a>葡萄酒</a></div></div>
						<div><span class="columnName">产区</span><div class="cqContent"><a>勃艮第</a><a>勃艮第2</a><a>勃艮第11111</a><a>勃艮</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第</a></div></div>
						<div><span class="columnName">价格</span><div class="jgContent"><a>红葡萄酒</a><a>红葡萄酒</a><a>桃红葡萄酒</a><a>红葡萄酒</a><a>葡萄酒</a></div></div>
						<div><span class="columnName">级别</span><div class="jbContent"><a>红葡萄酒</a><a>红葡萄酒</a><a>桃红葡萄酒</a><a>红葡萄酒</a><a>葡萄酒</a></div></div>
					</div> -->
					<table class="flColumn" style="word-wrap: break-word; word-break: break-all;">
						<!-- <tr>
							<td style="background-color: #eceaea;width: 150px;">
							<div class="columnName">
								分类
							</div>
							</td>
							<td class="flContent">
								<a v-for="(item,index) in type.data" 
									:key="index" @click="addTag('分类',item.dictLabel)">{{item.dictLabel}}
								</a>
								 <a>红葡萄酒</a><a>桃红葡萄酒</a><a>红葡萄酒</a><a>葡萄酒</a> 
							</td>
						</tr> -->
						<!-- <tr>
							<td style="background-color: #eceaea;">
								<div class="columnName">
									产区
								</div>
							</td>
							<td><div class="cqContent"><a>勃艮第</a><a>勃艮第2</a><a>勃艮第11111</a><a>勃艮</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第</a><a>葡萄酒勃艮第d</a></div></td>
						</tr>
						<tr>
							<td style="background-color: #eceaea;">
								<div class="columnName">
									价格
								</div>
							</td>
							<td><div class="jgContent"><a>￥100以下</a><a>￥100-300</a><a>￥301-500</a><a>￥501-1000</a><a>￥1001-3000</a><a>￥3000以上</a></div></td>
						</tr>
						<tr>
							<td style="background-color: #eceaea;">
								<div class="columnName">
									年份
								</div>
							</td>
							<td><div class="nfContent" v-if="nowYear-2020>=0"><a v-for="(item,index) in (nowYear-2019)">{{nowYear-index}}年</a>
							</div></td>
						</tr> -->
					</table>
					<!-- <div style="margin-top: 10px;">
						<el-tag
						  v-for="tag in tags"
						  
						  closable
						  @close="handleClose(tag)"
						  type="danger" dark
						 >
						  <span>{{tag.type}} :</span>
						  <span style="font-weight: 600;">&nbsp;&nbsp;{{tag.label}}</span>
						</el-tag>
					</div> -->
					<div class="classContent" style="font-family: PingFangSC-Medium, sans-serif" v-if="this.booth">
						<div class="classModule"
							v-for="(item,index) in booth.rows"
							:key="index"
						>						
							<div>
								<router-link :to="{ name:'zsDetail', query:{id:item.userId}}" style="text-decoration: none">
								<img :src="'https://zha.heavenk.com/prod-api'+ item.boothpictures" alt="" 
								style="width: 272px;height: 243px;z-index: 100;">
								</router-link>
								</div>
							<div style="padding: 10px 15px;">
								<div style="text-align: left;color: #150e52;font-size: 16px;font-weight: 600;">{{ item.boothname }}</div>
								<div style="margin-top: 5px;height: 51px;overflow: hidden;">
									<el-tag class="label">{{ item.boothname }}</el-tag>
								</div>
								<!-- <a :href="'https://zh.heavenk.com/chateau/20227.html?id='+item.userId" target="_blank" style="text-decoration:none;color:white;"> -->
								<router-link :to="{ name:'zsDetail', query:{id:item.userId}}" style="text-decoration: none">
								<div class="enterButton" >
									进入展位
								</div>
								</router-link>
								<!-- </a> -->
							</div>
						</div>
						
					</div>
					
				</div>
			</div>
			<div style="width: 1140px;min-width: 1140px;margin: auto;margin-top: 35px;height: 40px;">
				<div style="height: 60px;float: right;margin-top: 0px;" v-if="total">
											 <el-pagination
											      @size-change="handleSizeChange"
											      @current-change="handleCurrentChange"
											      :current-page.sync="currentPage"
											      :page-size="8"
											      layout="prev, pager, next"
											      :total="this.total">
											    </el-pagination>
												<div class="el-pagination__jump">
													共{{totalPageSize}}页，到第<div class="el-input el-pagination__editor is-in-pagination">
														<input type="text" class="inputNum" v-model="pageInputNum"
														oninput="value=value.replace(/[^\d]/g,'');
														if(value<=0)value='';if(value.length > 1 && value.substr(0,1) ==0 && value.substr(1,1) !='.'){
														value= value.substr(1,1)}" >
												</div>
												页
												</div>
												
											<button class="button1" style=""  @click="changePage">确定</button>
									</div>
			</div>
			
		</div>
		<mainBottom></mainBottom>
	</div>
</template>

<script>
	import mainTop from '../components/mainTop.vue'
	import mainBottom from '../components/mainBottom.vue'
	import axios from 'axios';
	export default {
	  components: { 
		  mainTop,
		  mainBottom
	   },
	   data(){
		   return{
			   zgTitleModuleHoverIndex:0,
			   selectedzgTitleModuleHover:0,
			   selectedOriginHover:0,
			   tags: [
			        //     { type: '分类', label: '红葡萄酒' },
					//   { type: '年份', label: '2020' },
					//   { type: '产区', label: '中国' },
					
			           ],
				itemt:'葡萄酒',
				nowYear:2020,
				pageSize: 16,
				totalCount: 1,
				totalPageSize:1,
				pageInputNum:'',
				currentPage: 1,
				exhibition:'',
				type:'',
				booth:'',
				total:5,
				exhibitor:'',
				checkExhibitor:'',
				id:'',

				
		   };
	   },
	   created(){
			this.getexhibition();
			this.gettype();
			// this.getbooth(47);
			this.getexhibitor();
	   },
	   methods:{
			
		   	handleClose(tag){
			     let _this = this;
			         for (let i = 0; i < _this.tags.length; i++) {
			           if (_this.tags[i] == tag) {
			             _this.tags.splice(i, 1);
			             break;
			           }
			         }
		   },
		   addTag(type,label){
			   for(var i=0;i<this.tags.length;i++){
				   if(this.tags[i].label==label){
					   return;
				   }
			   }
			   var tag={
				   type:type,
				   label:label
			   }
			   this.tags.push(tag);
		   },
		   getNowYear(){
				let nowDate = new Date();
			   this.nowYear=nowDate.getFullYear();
		   },
		   handleSizeChange(val) {
		   	console.log(`每页 ${val} 条`);
		   },
		   handleCurrentChange() {
		    //   this.contentPerPage.pn=this.currentPage;
		    //   contentList(this.contentPerPage).then(response => {
		    //           this.contentPerPageList = response.data;
		    //         });
				this.getbooth(this.articleTypeNum,this.currentPage)
		   },
		   changeFirstPage(){
		   	this.currentPage=1;
		   	this.handleCurrentChange();
		   },
		   changeLastPage(){
		   	this.currentPage=this.totalPageSize;
		   	this.handleCurrentChange();
		   },
		   getTotalPageSize(){
		   	this.totalPageSize=this.totalCount/this.pageSize
		   },
		   changePage(){
			this.currentPage=parseInt(this.pageInputNum);
		   	this.handleCurrentChange();
		   },
		   getexhibition(){
				this.id=this.$route.query.id
				axios.get('https://zha.heavenk.com/prod-api/web/exhibition/list').then(async(res)=>{
                    this.exhibition=res.data
					// console.log(this.id);
					if(this.id!=undefined){
						for (let index = 0; index < res.data.rows.length; index++) {
							if (res.data.rows[index].id==this.id) {
								this.zgTitleModuleHoverIndex=index
								this.selectedzgTitleModuleHover=index
								this.getbooth(res.data.rows[index].id)
							} else {
								
							}
							
						}
					}else{
						this.getbooth(res.data.rows[0].id)
					}
                })
		   },
		   gettype(){
				axios.get('https://zha.heavenk.com/prod-api/system/dict/data/type/type').then((res)=>{
                    this.type=res.data
                })
		   },
		   getbooth(eid,pnum){
				if(pnum===null)pnum=1
				axios.get('https://zha.heavenk.com/prod-api/web/booth/list/'+eid+'?pageNum='+pnum+'&pageSize=8').then((res)=>{
                    this.booth=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
					// console.log(this.totalPageSize);
                })
		   },
		   clickexhibition(num,id){
				this.selectedzgTitleModuleHover=num
				this.getbooth(id)
		   },
		   click2d(num){
				this.selectedzgTitleModuleHover=num
				this.getAllBooth()
		   },
		   getAllBooth(){
				axios.get('https://zha.heavenk.com/prod-api/web/booth/list?pageNum=1&pageSize=12').then((res)=>{
                    this.booth=res.data
					this.total=res.data.total
					this.totalPageSize=Math.ceil(this.total/8)
                })
		   },
		   clickToExhibitor(id){
				for (let index = 0; index < this.exhibitor.rows.length; index++) {
					if(this.exhibitor.rows[index].exhibitorid===id){
						window.location.href = 'https://zh.heavenk.com/chateau/20227.html?id='+this.exhibitor.rows[index].id;
					}
					
				}
				
		   },
		   goZsDetail(pid){
		   	var { href } = this.$router.resolve({
		   	    path: '/zsDetail',
		   	});
		   	 localStorage.setItem("id", pid)
		   	 window.open(href, '_blank')
		   		 
		   },
		   getexhibitor(){
				axios.get('https://zha.heavenk.com/prod-api/web/exhibitor/list').then((res)=>{
                    this.exhibitor=res.data
                })
		   }


	   },
	   mounted() {
	   		this.getNowYear()
			

	   }
	}
</script>

<style>
	.zgzsMiddleBox{
		width: 100%;
		min-width: 1700px;
		background-color: #f7f7f7;
	}
	.zgzs{
		width: 1140px;
		min-width: 1140px;
		/* height: 596px; */
		margin: auto;
		margin-top: 37px;
	}
	.zgTitleModule{
		width: 206px;
		margin-top: 10px;
		height: 97px;
		background-color: #fff;
		font-size: 17px;
		color: #150e52;
		display: inline-block;
		margin-right: 22px;
		text-align: center;
		line-height: 36px;
		font-weight: 600;
	}
	.zgTitleModule:nth-child(5n){
		width: 210px;
		height: 97px;
		background-color: #fff;
		font-size: 17px;
		color: #150e52;
		display: inline-block;
		margin-right: 0px !important;
		text-align: center;
		line-height: 36px;
		font-weight: 600;
	}
	.zgTitleModuleRight a{
		color: #150e52;
	}
	.zgTitleModuleHover{
		background-color: #150e52 !important;
		color: #fff !important; 
	}
	.zgTitleModuleHover a{
		background-color: #150e52 !important;
		color: #fff !important; 
	}
	.zgfl{
		
	}
	.originHover{
		font-weight: 600;
		border-bottom: 2px solid #150e52;
	}
	.flColumn{
		width: 100%;
		color: #150e52;
		border-collapse: collapse;
		border-top: 2px solid #eceaea;
		border-left: 2px solid #eceaea;
		border-right: 2px solid #eceaea;
		border-bottom: 2px solid #eceaea;
		margin-top: 25px;
	}
	.flColumn>tr>td{
		border-bottom: 2px solid #eceaea;
	}
	.columnName{
		width: 150px;
		/* min-height: 71px; */
		background-color: #eceaea;
		font-size: 17px;
		text-align: center;
		line-height: 70px;
	}
	.flContent{
		max-width: 930px;
		/* border-bottom: 2px solid #eceaea; */
		padding: 0px 30px;
	}
	.flContent>a{
		margin-right:40px;
		font-size: 17px;
		height: 68px;
		line-height: 68px;
	}
	.cqContent{
		max-width: 910px;
		/* border-bottom: 2px solid #eceaea; */
		padding: 0px 40px;
	}
	.cqContent>a{
		margin-right:40px;
		font-size: 17px;
		/* width: 150px; */
		height: 68px;
		line-height: 68px;
	}
	.jgContent{
		max-width: 950px;
		/* border-bottom: 2px solid #eceaea; */
		padding: 0px 20px;
	}
	.jgContent>a{
		font-size: 17px;
		/* width: 150px; */
		height: 68px;
		line-height: 68px;
		margin-right: 30px;
	}
	.nfContent{
		max-width: 920px;
		display: inline-block;
		/* border-bottom: 2px solid #eceaea; */
		overflow: hidden;
		height: 68px;
		padding: 0px 35px;
	}
	.nfContent>a{
		margin-right:55px;
		font-size: 17px;
		/* width: 150px; */
		height: 68px;
		line-height: 68px;
		display: inline-block;
	}
	.el-tag.el-tag--danger{
		color: #150e52 !important ; 
		background-color: #f7f7f7 !important;
		border: 2px solid #eceaea !important;
		border-radius: 0px !important;
		width: auto !important;
		font-size: 17px;
		padding-left:10px;
		padding-right: 20px;
		height: 45px;
		line-height: 43px;
	}
	.el-tag__close.el-icon-close{
		color: #fff !important;
		background-color: #d3d3d3 !important;
		height: 20px !important;
		width: 20px !important;
		line-height: 20px !important;
		right: -11px !important;
	}
	.el-icon-close:before {
	    font-size: 17px;
	}
	.el-tag{
		margin-right: 10px;
	}
	/* .classModule:hover,.classModuleRight:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
	} */
	.classModule{
		width: 272px;
		height: 382px;
		background-color: #fff;
		display: inline-block;
		margin-right: 13px;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
	}
	.classModule:hover{
		transform: translateY(-10px);
		box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
		/* left: 110%;
		transition: all .1s; */
	}
	/* .fg4{
		position: absolute;
		left: -110%;
		top: 0;
		width: 593px;
		height: 340px;
		background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
		transform: skew(-30deg);
	} */
	.classContent{
		margin-top: 15px;
		width: 100%;
		height: auto;
		/* height: 905px; */
	}
	.classModule:nth-child(4n){
		width: 272px;
		height: 382px;
		background-color: #fff;
		display: inline-block;
		margin-top: 18px;
		overflow: hidden;
		position: relative;
		transition: all .2s;
		margin-right: 0px !important;
	}
	.label.el-tag.el-tag--light {
		background-color: #e5eeff !important;
		font-size: 14px !important;
		border:0px !important;
		border-radius: 0px !important;
		padding: 0 15px;
		line-height: 20px;
		height: auto;
		color: #150e52;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.enterButton{
		background-color: #150e52;
		width: 100%;
		height: 30px;
		border-radius: 20px;
		margin-top: 8px;
		color: #fff;
		font-size: 15px;
		text-align: center;
		line-height: 30px;
		cursor: pointer;
	}
	.el-pagination{
		  display: inline-block;
		  float: left;
	  }
	  .el-pager li,.el-pager li.active+li {
		border: 2px solid #8c8c8c !important;
		margin-right: 12px !important;
		color: #8c8c8c;
		border-radius: 7px;
		height: 35px !important;
		font-size: 18px !important;
		line-height: 33px !important;
		width: 26px;
		font-family: Arial, Helvetica, sans-serif;
		
	  }
	   .el-pager li:hover{
		   color: #8c8c8c !important;
	   }
	  .el-pager li{
		  background-color: #f7f7f7 !important;
	  }
	  .btn-next{
		  padding-left: 2px !important;
		  background-color: #f7f7f7 !important;
	  }
		   
	   .btn-prev{
		    background-color: #f7f7f7 !important;
	   }
	  .btn-prev .el-icon-arrow-left:before,.btn-next .el-icon-arrow-right:before {
	      border: 2px solid #8c8c8c;
	      height: 31px;
	      display: flex;
	      width: 26px;
	      border-radius: 7px;
	      text-align: center;
	      margin: auto;
	      line-height: 32px;
	      font-size: 24px;
	      padding-left: 5px;
	      font-weight: 700;
		  color: #8c8c8c;
	  }
	  .el-icon-arrow-right:before {
	      content: "\E6E0";
	      margin-left: -12px;
	  }
	 
	  .button1{
	  		  width: 67px;
	  		  height: 36px;
	  		  font-size: 16px;
	  		  border-radius: 7px;
	  		  color: #ffffff;
	  		  background-color: #150e52;
	  		  font-weight: 700;
	  		  margin-left:12px;
	  		  float: left;
	  		  margin-top: 2px;
			  border: 0px;
	  }
	  .el-pager li.active {
	      color: white !important;
	      cursor: default;
	      background-color: #150e52 !important;
	      border: 1px !important;
	      /* text-align: center; */
	      line-height: 36px !important;
		  
	  }
	  .el-pagination__jump {
	      margin-left: 3px !important;
	      font-weight: 600 !important;
	      color: #8c8c8c !important;
	      font-size: 17px;
		  float: left;
		  margin-top: 1px;
	  }
	  .inputNum{
		  width: 33px !important;
		  height: 33px !important;
		  border: 2px solid #8c8c8c !important;
		  border-radius: 7px;
		  border: 0;
		  outline: none; 
		  text-align: center;
		  background-color: #f7f7f7;
	  }
	.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{
		border:0px !important;
		color: #8c8c8c !important;
	}
</style>